<template>
  <BasicDrawer
    :destroyOnClose="true"
    v-bind="$attrs"
    @register="registerDrawer"
    showFooter
    title="员工详情"
    width="760px"
    cancelText="关闭"
    okText="编辑"
    @ok="onEdit"
    :maskClosable="false"
  >
    <template #appendFooter>
      <a-popconfirm title="您确定要删除吗" ok-text="确定" cancel-text="取消" @confirm="onDelete">
        <a-button danger> 删除 </a-button>
      </a-popconfirm>
    </template>
    <div class="card">
      <div class="c-title"> 基础信息 </div>

      <div class="c-body">
        <a-row :gutter="[12, 12]">
          <a-col :span="3" class="label"> 员工姓名 </a-col>
          <a-col :span="9" class="value">
            {{ form.realName }}
          </a-col>

          <a-col :span="3" class="label"> 手机号码 </a-col>
          <a-col :span="9" class="d-regular value">
            {{ form.mobile }}
          </a-col>

          <a-col :span="3" class="label"> 店铺角色 </a-col>
          <a-col :span="9" class="value">
            {{ getLabel(staffRole, form.stationCode) }}
          </a-col>

          <a-col :span="3" class="label"> 在职状态 </a-col>
          <a-col :span="9" class="value">
            {{ getLabel(staffStatus, form.status) }}
          </a-col>

          <a-col :span="3" class="label"> 预约状态 </a-col>
          <a-col :span="9" class="value">
            {{ getLabel(storeBooking, form.storeBooking) }}
          </a-col>
        </a-row>
      </div>
    </div>

    <div class="card">
      <div class="c-title"> 员工账号信息 </div>

      <div class="c-body">
        <a-row :gutter="[12, 12]">
          <a-col :span="3" class="label"> 员工账号 </a-col>
          <a-col :span="9" class="d-regular value">
            {{ form.mobile }}
          </a-col>

          <a-col :span="3" class="label"> 登录密码 </a-col>
          <a-col :span="9" class="value">
            {{ form.passWord || '--' }}
          </a-col>
        </a-row>
      </div>
    </div>

    <div class="card">
      <div class="c-title"> 其他信息 </div>

      <div class="c-body">
        <a-row :gutter="[12, 12]">
          <a-col :span="3" class="label"> 身份证号 </a-col>
          <a-col :span="9" class="d-regular value">
            {{ form.cardNum || '--' }}
          </a-col>

          <a-col :span="3" class="label"> 员工生日 </a-col>
          <a-col :span="9" class="d-regular value">
            {{ form.birthday || '--' }}
          </a-col>

          <a-col :span="3" class="label"> 入职日期 </a-col>
          <a-col :span="9" class="d-regular value">
            {{ form.entryDate || '--' }}
          </a-col>

          <a-col :span="3" class="label"> 离职日期 </a-col>
          <a-col :span="9" class="d-regular value">
            {{ form.leaveDate || '--' }}
          </a-col>

          <a-col :span="3" class="label"> 员工头像 </a-col>
          <a-col :span="9" class="value">
            <span v-if="!form.headImgUrl">--</span>
            <a-avatar v-else shape="square" :size="66" :src="form.headImgUrl" />
          </a-col>
        </a-row>
      </div>
    </div>
  </BasicDrawer>
</template>

<script setup>
  import { defineOptions, reactive } from 'vue';

  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';

  import { getLabel, staffRole, staffStatus, storeBooking } from '@/api/ds';

  import { useRouter } from 'vue-router';
  import { POST, PUT } from '@/api/http';
  import { useMessage } from '@/hooks/web/useMessage';

  defineOptions({});

  const emit = defineEmits(['complete']);
  const form = reactive({});

  const { createMessage } = useMessage();
  const router = useRouter();

  const [registerDrawer, { closeDrawer }] = useDrawerInner(async ({ employeeCode }) => {
    Object.assign(form, (await POST('/membership/getEmployeeInfoBean', { employeeCode })) ?? {});
  });

  function onEdit() {
    closeDrawer();
    router.push(`./staff/edit?employeeCode=${form.employeeCode}`);
  }

  async function onDelete() {
    const { employeeCode } = form;
    await PUT('/membership/deleteEmployeeInfoBeanFunction', { employeeCode });

    createMessage.success('员工已删除');
    closeDrawer();
    emit('complete');
  }
</script>

<style lang="less" scoped>
  .card {
    margin: 8px 0 46px;
    padding: 12px;

    .c-title {
      display: flex;
      flex-direction: row;
      align-items: center;
      column-gap: 8px;
      color: #091f3d;
      font-size: 15px;
      font-weight: 600;
    }

    .c-body {
      margin-top: 16px;

      .label {
        color: #acb4bf;
      }

      .value {
        color: #091f3d;
      }
    }
  }
</style>
